<template>
  <div class="app-container">
    <div class="filter-container">
{foreach $field as $key=>$values }
{if $values.input_type=='radio' || $values.input_type=='select'}
      <div v-if="formThead.{$values['name']}" class="filter-item">
        <el-select v-model="listQuery.{$values['name']}" placeholder="{$values['comment']}" clearable @keyup.enter.native="handleFilter">
          <el-option v-for="op in select_{$values['name']}" :key="op.value" :label="op.label" :value="op.value"/>
        </el-select>
      </div>
{elseif $values.input_type=='date'/}
      <div v-if="formThead.{$values['name']}" class="filter-item">
        <el-date-picker v-model="listQuery.{$values['name']}" type="datetime" placeholder="{$values['comment']}" clearable @keyup.enter.native="handleFilter"/>
      </div>
{elseif $values.input_type!=='image'/}
      <el-input v-if="formThead.{$values['name']}" v-model="listQuery.{$values['name']}" style="width: 200px;" class="filter-item" placeholder="{$values['comment']}" clearable @keyup.enter.native="handleFilter"/>
{/if}{/foreach}
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <addPage @getLists="getLists"/>
    </div>

    <div class="filter-container">
{foreach $field as $keys=>$values}
      <el-checkbox v-model="formThead.{$values['name']}" label="{$values['comment']}">{$values['comment']}</el-checkbox>
{/foreach}
    </div>

    <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
{foreach $field as $keys=>$values}
      <el-table-column v-if="formThead.{$values['name']}" label="{$values['comment']}" align="center">
        <template slot-scope="scope">
{if $values.input_type=='radio' || $values.input_type=='select'}
{foreach $values.enum as $k=>$v}
{if $values.type=='Int' | $values.type=='TinyInt'}
          <span v-if="scope.row.{$values.name} === {$v.key}">{$v.name}</span>
{else }
          <span v-if="scope.row.{$values.name}==='{$v.key}'">{$v.name}</span>
{/if}
{/foreach}
          <span v-if="scope.row.{$values.name} === ''">—</span>
{elseif $values.input_type=='image' /}
          <span><img :src="scope.row.{$values.name}" alt="" height="120" @click="bigImage(scope.row.{$values.name})"></span>
{elseif $values.input_type=='text' /}
          <span><view{:parse_name($values.name,true)} :row_data="scope.row"/></span>
{elseif $values.input_type=='date' /}
          <span>{{ scope.row.{$values.name} | formatDate }}</span>
{else /}
          <span>{{ scope.row.{$values.name} }}</span>
{/if}
        </template>
      </el-table-column>
{/foreach}
      <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!--编辑-->
          <editPage :row_data="scope.row" @getLists="getLists"/>
          <!--删除-->
          <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"/>
        </template>
      </el-table-column>
    </el-table>
{foreach $field as $key=>$value }
{if $value.input_type=='image'}
    <!--大图弹窗-->
    <transition name="el-zoom-in-top">
      <div v-show="bigImageSrc !== null" class="bigImg" @click="bigImage()">
        <img :src="bigImageSrc" style="width:auto; height:400px; border-radius:0px;">
      </div>
    </transition>
{php}break;{/php}
{/if}
{/foreach}
    <!--页码-->
    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import { getList, del } from '@/api/{$model_name}/{:parse_name($table_name)}'
import store from '@/store'
import waves from '@/directive/waves' // 水波纹指令
import addPage from './addPage'
import editPage from './editPage'
{foreach $field as $keys=>$values}
{if $values.input_type == 'date'}
import { parseTime } from '@/utils/index'
{php}
break;
{/php}
{/if}
{/foreach}
{foreach $field as $keys=>$values}
{if $values.input_type == 'text'}
import view{:parse_name($values.name,true)} from './view{:parse_name($values.name,true)}'
{/if}
{/foreach}

export default {
  name: 'ComplexTable',
  directives: {
    waves
  },
  components: { addPage, editPage{foreach $field as $keys=>$values}
{if $values.input_type == 'text'}, view{:parse_name($values.name,true)}{/if}{/foreach} },
{foreach $field as $keys=>$values}
{if $values.input_type == 'date'}
  filters: {
    formatDate: function(time) {
      if (!time) {
        return ''
      }
      return parseTime(time)
    }
  },
{php}
break;
{/php}
{/if}
{/foreach}

  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
{php}$bigImg=true;{/php}
{foreach $field as $key=>$value}
{if $bigImg}
{if $value.input_type=='image'}
      bigImageSrc: null,
{php}$bigImg=false;{/php}
{/if}
{/if}
{if $value.input_type=='radio' || $value.input_type=='select'}
{php} $enum_len = count($value['enum']);{/php}
      select_{$value.name}: [{foreach $value.enum as $k=>$v}
{ value: {if $value.type=='Int' || $value.type=='TinyInt'}{$v.key}{else /}'{$v.key}'{/if}, label: '{$v.name}' }{if $k!==$enum_len-1}, {/if}
{/foreach}
],
{/if}
{/foreach}
      listQuery: {
{foreach $field as $key=>$value}
        {$value.name}: undefined,
{/foreach}
        page: 1,
        limit: 20
      },
      formThead: {
{foreach $field as $key=>$value }
{if ($key < 9) }
        {$value.name}: true{if ($key !== count($field)-1)},{/if}
{else /}
        {$value.name}: false{if ($key !== count($field)-1)},{/if}
{/if}

{/foreach}
      }
    }
  },
  created() {
    this.getLists()
  },
  methods: {
    getLists() {
      this.listLoading = true
      getList(store.getters.token, this.listQuery).then(res => {
{php}$time_calc = true;{/php}
{foreach $field as $key=>$value}
{if $value.input_type=='date'}
{if $time_calc}
        for (let i = 0; i < Object.keys(res.data.list.data).length; i++) {
{php}$time_calc = false;{/php}
{/if}
          res.data.list.data[i].{$value.name} *= 1000
{/if}
{/foreach}
{if $time_calc==false}
        }
{/if}
        if (res.data.status) {
          this.list = res.data.list.data
          this.total = res.data.list.total
        } else {
          this.$message.error(res.data.msg)
        }
        this.listLoading = false
      })
    },
{php}$bigImg=true;{/php}
{foreach $field as $key=>$value }
{if $bigImg}
{if $value.input_type=='image'}
    bigImage(src) {
      if (src !== undefined) {
        this.$set(this, 'bigImageSrc', src)
      } else {
        this.$set(this, 'bigImageSrc', null)
      }
    },
{php}$bigImg=false;{/php}
{/if}
{/if}
{/foreach}
    handleFilter() {
      this.listQuery.page = 1
      this.getLists()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getLists()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getLists()
    },
    del(id) {
      this.$confirm('此操作将永久删除该{$table_title}, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.info('正在删除，ID：' + id)
        del(store.getters.token, { id: id }).then(res => {
          if (res.status) {
            this.$message.success('已经删除，ID：' + id)
            this.getLists()
          } else {
            this.$message.error('删除失败，ID：' + id)
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除，ID：' + id)
      })
    }
  }
}
</script>
